/*
 * @Author: yangshangchao
 * @Date: 2025-01-23 17:49:39
 * @LastEditors: yangshangchao
 * @Description: 头部注释
 */
import { useState, useTransition } from 'react';
import { Input, List, Flex } from 'antd';

interface Item {
  name: string;
  address: string;
  id: number;
}
const App = () => {
  const [keyword, setKeyword] = useState('');
  const [list, setList] = useState<Item[]>([]);
  const [isPending, startTransition] = useTransition();
  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const val = e.target.value;
    setKeyword(val);
    fetch('/api/list?keyWord=' + val)
      .then((res) => res.json())
      .then((data) => {
        console.log(data.list);
        const renderList = data?.list ?? [];
        // setList([...renderList]);
        // 现象：此时把浏览器的性能 cpu设置 4xslowdown  [位置Environment settings ->cpu]；观察现象，用户输入时，输入的关键字，明显卡顿延迟显示
        // 使用useTransitions优化。
        startTransition(() => {
          setList([...renderList]);
        });
        // 现象基本不延迟显示关键字。原因：startTransition 开始过渡，执行非阻塞更新，把渲染列表的任务优先级调度调低
      });
  };

  return (
    <>
      <div>
        <h3>7-4.使用useTransition</h3>
        <span>不常用。常作为体验优化使用，UI中某个任务数据加载耗时较长时，不阻塞用户交互改变其他UI的任务</span>
        <div>
          <Flex>
            <Input value={keyword} placeholder="Basic usage" onChange={handleInputChange} />
          </Flex>

          {isPending && <div>loading...</div>}
          <List
            dataSource={list}
            renderItem={(item) => (
              <List.Item>
                <List.Item.Meta title={item.name} description={item.address} />
              </List.Item>
            )}
          ></List>
        </div>
      </div>
    </>
  );
};

export default App;

// 扩展
// const renderList = data?.list ?? [];   和  const renderList = data?.list || []; 区别
// ?? 只会在左侧操作数为 null 或 undefined 时返回右侧操作数。
// || 会在左侧操作数为任何假值时返回右侧操作数。 (假值包括：false、0、""（空字符串）、null、undefined 和 NaN)
// const c = '' ?? 'default';
// const d = 0 ?? 'default';
// const c = '' || 'default';
// const d = 0 || 'default';
